<template>
  <div class="pictures">
    <el-row :gutter="10" v-for="i in getRows" class="picture-row">
      <el-col :span="4">
        <el-image :src="pictures[6*(i-1)]" v-if="[6*(i-1)] < pictures.length" class="picture"/>
      </el-col>
      <el-col :span="4">
        <el-image :src="pictures[1+6*(i-1)]" v-if="[1+6*(i-1)] < pictures.length" class="picture"/>
      </el-col>
      <el-col :span="4">
        <el-image :src="pictures[2+6*(i-1)]" v-if="[2+6*(i-1)] < pictures.length" class="picture"/>
      </el-col>
      <el-col :span="4">
        <el-image :src="pictures[3+6*(i-1)]" v-if="[3+6*(i-1)] < pictures.length" class="picture"/>
      </el-col>
      <el-col :span="4">
        <el-image :src="pictures[4+6*(i-1)]" v-if="[4+6*(i-1)] < pictures.length" class="picture"/>
      </el-col>
      <el-col :span="4">
        <el-image :src="pictures[5+6*(i-1)]" v-if="[5+6*(i-1)] < pictures.length" class="picture"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Pictures",
  data() {
    return {
      pictures: []
    }
  },
  computed: {
    getRows() {
      return this.pictures.length % 6 === 0 ? this.pictures.length / 6 : parseInt(this.pictures.length / 6) + 1
    }
  },
  methods: {
    getAllPictures() {
      let movieId = this.$store.getters.getMovieInfoDetail.movieId
      this.$http({
        url: `/web/movie/info/pictures/${movieId}`,
        method: 'get'
      }).then(({data}) => {
        let pictures = data.data
        for (let i = 0; i < pictures.length; i++) {
          this.pictures.push(pictures[i])
        }
      })
    }
  },
  created() {
    this.getAllPictures()
  }
}
</script>

<style scoped>
.pictures {
  margin-top: 30px;
}

.picture-row {
  margin-bottom: 15px;
}

.picture {
  width: 120px;
  height: 120px;
}
</style>